<template>
	<view class="" style="position: relative;height: 100vh;width: 100vw;">
		<view id="threePositionDiv" style="position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);display: block;color: #fff">3D加载中...</view>
		<view class="three-box" style="height: 100%;width: 100%;">
			<view id="threeView" style="height: 100%;" :threeJsSrc="threeJsSrc" :change:threeJsSrc="three.showThree"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				threeJsSrc: '',
			}
		},
		onLoad(options) {
			setTimeout(()=>{
				this.threeJsSrc = options.src;
			},1000)
		}
	}
</script>

<!-- #ifdef H5 || APP-PLUS -->
<script module='three' lang="renderjs">
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
let scene,camera,renderer,controls,light,directionalLight,loader
	export default {
		mounted() {
			//初始
			this.initThree();
			// 动画
			this.initAnimate();
		},
		methods: {
			// 初始
			initThree(){
				let windowWidth = window.innerWidth;
				let windowHeight = window.innerHeight;
				// 创建场景和相机
				scene = new THREE.Scene();
				scene.background = new THREE.Color(0x808080);
				camera = new THREE.PerspectiveCamera(75,windowWidth / windowHeight,0.1,10);
				
				camera.position.set(1,1,1);
				// 创建渲染器
				renderer = new THREE.WebGLRenderer({antialias:true});
				renderer.setSize(windowWidth,windowHeight);
				let myCanvas = document.getElementById("threeView");
				myCanvas.appendChild(renderer.domElement);
				// 加载器
				loader = new GLTFLoader();
				// 环境光
				light = new THREE.AmbientLight( 0x404040 ); // soft white light
				scene.add( light );
				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
				scene.add( directionalLight ); 
				// 轨道
				controls = new OrbitControls(camera, renderer.domElement);
				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;
				//是否可以缩放
				controls.enableZoom = false;
				//是否开启右键拖拽
				controls.enablePan = false;
				// 更新
				controls.update();
			},
			// 清除画布
			clearModel () {
			  if (scene !== null) {
				scene.children = [];
				// 必须要清空当前div下的canvas不然canvas会继续叠加
				let domDiv = document.getElementById('threeView');
				domDiv.innerHTML = '' 
				camera = null;
				renderer = null;
				light = null;
				directionalLight = null;
				controls = null;
				loader = null;
			  }
			},
			// 加载模型
			gltfLoaderData(gltfSrc){
				// 添加加载器
				loader.load(gltfSrc, function(glb) {
					// 隐藏加载中
					let domLoading = document.getElementById("threePositionDiv");
					domLoading.style.display = "none";
					
					let model = glb.scene; // 获取模型对象
					model.scale.set(1, 1, 1);
					model.position.y = - 0.5; // Y轴上移动
					scene.add(model);
				}, this.onModelProgress, (err) => {
					console.log(err)
				})
			},
			//进度
			onModelProgress(progressEvent ){
			  const { loaded ,total ,lengthComputable } = progressEvent
				//lengthComputable  true 可以获取到当前文件的总字节大小
			   if(lengthComputable ){
				const progress = loaded / total * 100
				console.log( progress + '% loaded' )
				}else{
					console.log('已加载'+loaded+'字节' )
			  }
		   },
			// 动画
			initAnimate(){
				requestAnimationFrame(this.initAnimate);
				// 更新控制器
				controls.update();
				// 旋转模型
				scene.rotateY(0.01);
				// 更新矩阵
				camera.updateProjectionMatrix();
				// 渲染
				renderer.render(scene,camera);
			},
			// 初始接收逻辑层发送的数据
			showThree(newValue, oldValue, ownerVm, vm) {
				// 清除
				this.clearModel();
				// 显示加载中
				let domLoading = document.getElementById("threePositionDiv");
				domLoading.style.display = "block";
				// 初始化
				this.initThree();
				// 重新加载模型
				this.gltfLoaderData(newValue);
				console.log('msg变化了newValue', newValue)
				console.log('msg变化了oldValue', oldValue)
				console.log('msg变化了ownerVm', ownerVm)
				console.log('msg变化了vm', vm)
			}
		}
	}
</script>
<!-- #endif -->

<style> 
</style>